<template>
	<div class="Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>运输任务(司机)</span> 
		</header>
		<div class="order-box">
			<div class="orderNo"><span>配载单号:&nbsp; </span>{{ orderInfo.code }}</div>
			<div class="order-item">
				<div style="width: 40%"><span>司机:&nbsp; </span> {{ orderInfo.driverName }}</div>
				<div><span>司机电话:&nbsp; </span>{{ orderInfo.mobileNumber }}</div>
			</div>
			<div style="font-size: 18px"><span>车牌:&nbsp; </span>{{ orderInfo.vehicleCode }}</div>
			<!-- <div class="btn">
				<div class="edit" @click="openNavigation(orderInfo)">导航</div>
			</div> -->
		</div>
		<div v-for="(item, index) in orgnizationList" :key="index">
			<div class="orgnization">
				<div class="orgnization-info">
					<div>
						<div style="display: flex; justify-content: space-between;">
							<div>{{item.tempFieldTwo}} -{{item.shortName}} </div>
							<div style="color: red" v-if="item.tempFieldFour">{{item.tempFieldFour}} KG</div> 
						</div>
						<div v-if="item.valideDateTo" style="margin-top: 10px;display: flex;">
							<div>要求到车时间:</div>
							<div style="margin-left: 10px;margin-top: 2px">{{item.valideDateTo}}</div> 
						</div>
						<div style="margin-top: 10px;display: flex;" v-if="item.phone">
							<div>联系人电话:</div>
							<div style="margin-left: 10px;margin-top: 2px">{{item.phone}}</div> 
							<div style="font-size: 20px;margin-left: 20px; color:#038EEA" @click="callPhone(item.phone)"><i class="el-icon-phone-outline"></i></div>
						</div>
						<div v-if="item.tempFieldOne == 'daoKu'" style="margin-top: 10px;">详细地址: {{item.address}}</div>
					</div>
					<div style="margin-top: 10px">
						<div v-if="item.tempFieldOne == 'daoKu'">
							<div v-if="!item.tempFieldThree" class="orgnization-btn">
								<div class="orgnization-btn-daoku" @click="goTonavigation(item)">导航</div>
								<div class="orgnization-btn-daoku" @click="abnormalBtn(item)">异常上报</div>
								<div class="orgnization-btn-daoku" @click="openClockInModle(item, '确认到达')">到达</div>
							</div>
							<div v-else class="orgnization-btn">
								<div class="orgnization-btn-daoku" @click="goTonavigation(item)">导航</div>
								<div class="orgnization-btn-daoku" style="background: #eee;">异常上报</div>
								<div class="orgnization-btn-daoku" style="background: #eee;">到达</div>
							</div>
						</div>
						<div v-if="item.tempFieldOne == 'liKu'" style="width: 100%">
							<div v-if="!item.tempFieldThree" class="orgnization-btn">
								<div class="orgnization-btn-liKu" @click="goTonavigation(item)">导航</div>
								<div class="orgnization-btn-liKu" @click="openClockInModle(item, '发车确认')">发车</div>
							</div>
							<div v-else class="orgnization-btn">
								<div class="orgnization-btn-liKu" @click="goTonavigation(item)">导航</div>
								<div class="orgnization-btn-liKu" style="background: #eee;">发车</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 页面数据为空时 -->
		<div v-if="is_NoData" class="NoData">
			<div>
				<i class="iconfont icon-meiyouwuliuxinxi"></i>
				<div>{{is_NoData_text}}</div>
			</div>
		</div>
		<el-dialog
		:title="type + '打卡'"
		top="15vh"
		:visible.sync="centerDialogVisible"
		:close-on-click-modal="false"
		width="95%"
		center>
		<div class="clockIn" @click="clockIn" v-if="isAllowClockIn">打卡</div>
		<div class="clockIn" v-else style="background-color: #7c747473;">打卡</div>
		<p v-if="!isAllowClockIn" style="font-size: 16px; color: red">提示: 当前位置距离最近仓库超过1000米，不允许打卡。</p>
		<div style="font-size: 14px;">当前定位: {{ $store.state.CurrentLocation }}</div>		
		<div class="uploadImg">
			<v-uploader title=""
				url="/system/shipment/driverClockIn"
				@onErr ="onErr"
				@onSuccess ="onSuccess"
				:limit="1"
				ref="uploadAb"
				:auto-upload="false"
				:file-list="fileList"
				:params="uploadParams"/>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onPlusReadyBtn">刷新定位</el-button>
			<el-button size="mini" @click="centerDialogVisible = false" style="margin-left: 30px;">关闭</el-button>
		</span>
		</el-dialog>
		<el-dialog
		title="导航地址选择"
		top="30vh"
		:visible.sync="navigationDialogVisible"
		:close-on-click-modal="false"
		width="80%"
		center>
			<div v-for="(item, index) in navigationList" :key="index">
				<div class="navigation_item">
					<div>{{ item.shortName }}</div>
					<p  @click="goTonavigation(item)"><i class="el-icon-position"></i></p>
				</div>
			</div>
		</el-dialog>

		<el-dialog
		title="异常上报"
		top="15vh"
		:visible.sync="abnormalDialogVisible"
		:close-on-click-modal="false"
		width="95%"
		center>
		<div style="display: flex; line-height: 40px">
			<p style="width: 110px; margin-right: 10px">堵车时间:</p>
			<el-input type="number" v-model="trafficJamDays" />
			<p style="width: 50px; margin-left: 5px">分钟</p>
		</div>
		<div style="display: flex; line-height: 40px; margin-top: 10px">
			<p style="width: 110px;">异常原因:</p>
			<el-input type="text" v-model="remark" /> 
		</div>
		<div class="uploadImg">
			<v-uploader title=""
				url="/system/shipment/driverReportTrafficJam"
				@onErr ="onErr"
				@onSuccess ="onSuccess2"
				:limit="2"
				ref="uploadAb2"
				:auto-upload="false"
				:file-list="fileList"
				:params="uploadAbnormalParams"/>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" style="width: 45%;" @click="abnormalDialogVisible = false">关闭</el-button>
			<el-button size="mini" type="primary" style="width: 45%" @click="abnormalSubmit">上报</el-button>
		</span>
		</el-dialog>
	</div>
</template>
<script>
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
  import Uploader from '@/components/uploader'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery" 
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'OrderListDriver',
		components: {
      'v-header': Header,
      'v-uploader': Uploader, // 上传组件
      'pictureSample': pictureSample
		},
		data() {
			return {
				code: '',
				address: '',
      			consignesList: [],
				orderList: [],
				type: '',
				currentItem: {},
				centerDialogVisible: false,
				distanceList: [],
				isAllowClockIn: false,
				orgnizationId: null,
				allLoaded: true, // 上拉刷新还能上拉刷新
				autoFill: false,
				loadPage: 1, // 当前第几页
				wrapperHeight: 0,
				is_NoData: false, // 没有数据模块样式  是否显示
				is_NoData_text: '暂无数据', // 没有数据模块样式  显示的文字
				navigationDialogVisible: false,
				abnormalDialogVisible: false,
				navigationList: [],
				uploadParams: {},
				uploadAbnormalParams: {},
				fileList: [],
				orderInfo: {},
				orgnizationList: [],
				trafficJamDays: null,
				remark: null
			}
		},
		watch: { 
		},
		mounted() {
			this.wrapperHeight = document.documentElement.clientHeight - 120
			this.onPlusReady('e') // 获取APP经纬度
		},
		created() {
			this.orderInfo = this.$route.query.orderInfo
			this.orgnizationList = this.orderInfo.orgnizationList
			this.orgnizationList.forEach((ele,index) => {
				if (index==0 || !this.navigationList.filter(a => a.id == ele.id).length) {
					this.navigationList.push(ele)
				}
			})
			CallAndroidOrIOS.getImageChooserType('camera');
		},
		methods: { 
			onSuccess(aa) {
				this.centerDialogVisible = false
				this.uploadParams = {} 
				this.getOrderList()
			},
			onSuccess2() {
				this.trafficJamDays = null
				this.remark = null
				this.abnormalDialogVisible = false
				this.uploadAbnormalParams = {}
				this.getOrderList()
			},
			onErr() {
			},
			getOrderList () {
				let that = this
				const params = {
					code: this.orderInfo.code,
					currentPage: 1
				}
				this.httpRequest1('post', '/system/shipment/getShipmentListByDriver', params).then((res) => {
					let list = res.data.list
					that.orderInfo = list[0]
					that.orgnizationList = list[0].orgnizationList
				})
			},
			getQueryConsignesList (address) {
				let that = this
				const params = {
					"address": address
				}
				this.httpRequest1('post', '/system/app/queryConsignesList', params).then((res) => {
					that.consignesList = res.data
				})
			},
			goPrev() {
				this.$router.push({
					name: "OrderListDriver",
				})
			},
			onPlusReadyBtn() {
				this.onPlusReady('e')
				this.isAllowClockIn = false
				setTimeout(() => {
					this.openClockInModle(this.currentItem, this.type)
				}, 4000)
			},
			openClockInModle (item, type) {
				CallAndroidOrIOS.getImageChooserType('camera');
				this.type = type
				this.currentItem = item
				this.centerDialogVisible = true
				let distance = this.getDistances(item.latitude, item.longitude, this.$store.state.latitude, this.$store.state.longitude)
				this.address =  item.address
				this.orgnizationId = item.id
				if (distance.m < 1200) {
					this.isAllowClockIn = true
				} else {
					this.isAllowClockIn = false
				}
			},
			// 计算两个经纬度直接的距离
			getDistances(lat1, lng1, lat2, lng2) {
				let EARTH_RADIUS = 6378.137;// 地球半径
				let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
				let radLat2 = lat2 * Math.PI / 180.0;
				let a = radLat1 - radLat2;
				let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * EARTH_RADIUS; 
				s = Math.round(s * 10000) / 10000;// 输出为公里
				return { m: s * 1000, km: Number(s.toFixed(2)) }
			},
			// 切换仓库
			changeAddress () {
				let addressObj = this.distanceList.filter(ele => { return ele.address == this.address})[0]
				this.orgnizationId = addressObj.id
				if (addressObj.m < 1200) {
					this.isAllowClockIn = true
				} else {
					this.isAllowClockIn = false
				}
			},
			clockIn () {
				this.uploadParams = {
					type: this.type == '确认到达' ? 'daoKu' : 'liKu',
					shipmentId: this.orderInfo.id,
					orgnizationId: this.orgnizationId,
					segmentNum: this.currentItem.tempFieldFive
				}
				
				this.$refs.uploadAb.submit(this, this.uploadParams);	
				// this.$refs.uploadAb.submit();
				console.log(this.uploadParams,)
				// this.httpRequest1('post', '/system/shipment/driverClockIn', params).then((res) => {
				// 	if (res.success) {
				// 		that.$message({
				// 			message: '打卡成功',
				// 			type: 'success'
				// 		});
				// 		that.centerDialogVisible = false
				// 	}
				// })
			},
			//点击打开导航地址选择
			openNavigation (item) {
				this.navigationDialogVisible = true
			},
			goTonavigation(item) {
				if (item.address) {
					this.Navigate_SelectComit(item.address)
				} else {
					if (!item.longitude || !item.latitude) {
						this.$alert('该地址无经纬度信息，无法导航', '提示', {
							confirmButtonText: '确定'
						})
						return
					}
					let params = {
						longitude: item.longitude, // 经度
						latitude: item.latitude, // 纬度
						cc: '2' // cc=1表示高德，cc=2表示百度，cc=3表示84坐标系
					}
					let that = this
					that.httpRequest1('post','/system/app/locationChangeAddress',params).then(res => {
						if (res.success && res.data.formatted_address) {
							console.log(res.data.formatted_address)
							that.Navigate_SelectComit(res.data.formatted_address)
						}
					})
				}
			},
			abnormalBtn(item) {
				this.uploadAbnormalParams = {
					type: this.type == '确认到达' ? 'daoKu' : 'liKu',
					shipmentId: this.orderInfo.id,
					orgnizationId: item.id,
					segmentNum: item.tempFieldFive
				}
				CallAndroidOrIOS.getImageChooserType('all');
				this.abnormalDialogVisible = true
			},
			abnormalSubmit () {
				if (!this.trafficJamDays) {
					return
				}
				this.uploadAbnormalParams.trafficJamDays = this.trafficJamDays
				this.uploadAbnormalParams.remark = this.remark
				this.$refs.uploadAb2.submit(this, this.uploadAbnormalParams);	
			}
    	},
  		beforeDestroy () {
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.Abnormal {
		font-size: 28/50rem;
	}
	.order-box {
		margin: 10px;
		border: 1px solid #e1e1e1;
		padding: 10px 10px;
		line-height: 23px;
		margin-top: 60px;
		.orderNo {
			border-bottom: 1px solid #e1e1e1;
			font-size: 20px;
		}
		.order-item {
			display: flex;
			margin-top: 10px;
			font-size: 18px;
			margin-bottom: 5px;
		}
		span {
			color: #6e6b6bbd;
		}
	}
	.orgnization {
		margin: 10px;
		display: flex;
		justify-content: space-between;
		.orgnization-info {
			width: 100%;
			padding: 10px;
			border: 1px solid #e1e1e1;
		}
		.orgnization-btn {
			display: flex;
			justify-content: space-between;
			// text-align: center;
			// // width: 12%;
			// padding: 10px;
			// border: 1px solid #e1e1e1;
			.orgnization-btn-daoku {
				background: #038EEA;
				color:#fff;
				width:30%;
				text-align: center;
				padding-top: 5px;
				padding-bottom: 5px; 
			}
			.orgnization-btn-liKu  {
				background: #038EEA;
				color:#fff;
				width:48%;
				text-align: center;
				padding-top: 5px;
				padding-bottom: 5px; 
			}
		}
	}
	.query-box {
		background: #fff;
		position: fixed;
		top: 90/50rem;
		width: 100%;
	}
	.btn {
		display: flex;
		justify-content: space-around;
		margin-top: 6px;
		.edit {
			height: 30px;
			line-height: 30px;
			width: 100%;
			background-color: #038EEA;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
		.del {
			width: 30%;
			background-color: red;
			color: #fff;
			text-align: center;
			border-radius: 5px;
		}
	}
	/deep/ .el-dialog__header {
		padding: 10px;
	}
	/deep/ .el-dialog--center .el-dialog__body {
		padding: 15px 15px 20px;
		font-size: 16px;
	}
	/deep/ .el-dialog__footer {
		padding-bottom: 10px;
	}
	.footer-btn {
		position: fixed;
		bottom: 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 5px;
		width: 50%;
		background-color: #038EEA;
		color: #fff;
		margin-left: 25%;
	}
	
.address {
  margin-top: 10px;
  display: flex;
  img {
    width: 80/50rem;
		padding: 12/50rem;
		box-sizing: border-box;
		height: 80/50rem;
		line-height: 80/50rem;
  }
  .ok-btn {
    width: 76/50rem;
    height: 76/50rem;
    font-size: 28/50rem;
    line-height: 80/50rem;
    margin: 0 10/50rem;
    text-align: center;
    background-color: #038EEA;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
.currentAddress {
  font-size: 28/50rem;
  padding: 20/50rem;
  color: #9b9b9b;
}
/deep/ .el-select-dropdown.el-popper {
  left: 0 !important;
  z-index: 9999;
}
.el-select-dropdown .el-select-dropdown__item {
  white-space: normal;
  line-height: 20px !important;
  height: inherit;
  border-bottom: 1px solid #e1e1e1;
  padding-top: 5px;
  padding-bottom: 5px;
}
.clockIn {
	height: 80px;
	width: 80px;
	background-color: #038EEA;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	border-radius: 50%;
	line-height: 80px;
	text-align: center;
	color: #fff;
	font-size: 20px;
} 
.navigation_item {
	line-height: 40px;
	display: flex;
	border-bottom: 1px solid #eee;
	div {
		width: 80%;
	}
	i {
		color: #038EEA;
	}
}
</style>